<template>
  <div class="role-list">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          ref="form"
        >
          <el-form-item label="角色名称" prop="name">
            <el-input
              v-model="formInline.name"
              placeholder="输入角色名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" :disabled="isLoading"
              >查询搜索</el-button
            >
            <el-button @click="onReset" :disabled="isLoading">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-button style="float: left" @click="addRole">添加角色</el-button>

      <el-table :data="roles" style="width: 100%" v-loading="isLoading">
        <el-table-column type="index" label="编号"> </el-table-column>
        <el-table-column prop="name" label="角色名称"> </el-table-column>
        <el-table-column prop="description" label="描述"> </el-table-column>
        <el-table-column prop="createdTime" label="添加时间"> </el-table-column>
        <el-table-column label="操作" min-width="120px">
          <template slot-scope="scope">
            <div>
              <el-button size="mini" @click="handleMenu(scope.row)" type="text"
                >分配菜单</el-button
              >
              <!-- <el-button
                size="mini"
                @click="handleResource(scope.row)"
                type="text"
                >分配资源</el-button
              > -->
            </div>
            <div>
              <el-button size="mini" type="text" @click="handleEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="formInline.current"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="formInline.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        :disabled="isLoading"
      >
      </el-pagination>
    </el-card>

    <el-dialog title="添加角色" :visible.sync="dialogVisible" width="30%">
      <create-or-edit
        v-if="dialogVisible"
        @success="onSuccess"
        @cancel="dialogVisible = false"
        :roleId="roleId"
        :isEdit="isEdit"
      />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { getRoles, deleteRole } from "@/services/role";
import { Form } from "element-ui";
import CreateOrEdit from "./CreateOrEdit.vue";
export default Vue.extend({
  name: "RoleListIndex",
  components: {
    CreateOrEdit,
  },
  data() {
    return {
      formInline: {
        name: "",
        startCreateTime: "",
        endCreateTime: "",
        current: 1,
        size: 5,
      },
      roles: [],
      totalCount: 0,
      isLoading: false,
      dialogVisible: false,
      roleId: null,
      isEdit: false,
    };
  },
  created() {
    this.loadGetRoles();
  },
  methods: {
    async loadGetRoles() {
      const { data } = await getRoles(this.formInline);
      if (data.code === "000000") {
        this.roles = data.data.records;
        this.totalCount = data.data.total;
      }
    },
    onSubmit() {
      this.formInline.current = 1;
      this.loadGetRoles();
    },
    onReset() {
      (this.$refs.form as Form).resetFields();
      this.loadGetRoles();
    },
    addRole() {
      this.dialogVisible = true;
      this.isEdit = false;
    },
    handleMenu(item: any) {
      console.log("item");
      this.$router.push({
        name: "alloc-menu",
        params: {
          roleId: item.id,
        },
      });
    },
    handleResource(item: any) {
      console.log("item");
    },
    handleEdit(item: any) {
      this.dialogVisible = true;
      this.isEdit = true;
      this.roleId = item.id;
    },
    async handleDelete(item: any) {
      await this.$confirm(`确认删除角色: ${item.name}`, "删除提示");
      await deleteRole(item.id);
      this.$message.success("删除成功");
      this.loadGetRoles();
    },
    handleSizeChange(val: number) {
      this.formInline.size = val;
      this.formInline.current = 1;
      this.loadGetRoles();
    },
    handleCurrentChange(val: number) {
      this.formInline.current = val;
      this.loadGetRoles();
    },
    onSuccess() {
      this.dialogVisible = false;
      this.loadGetRoles();
    },
  },
});
</script>

<style lang="scss" scoped>
</style>